<?php
/**
 * 3-4岁思维训练专区内容
 */

if (!defined('ROOT_PATH')) {
    die('直接访问被禁止');
}

// 设置页面标题
set_page_title('3-4岁思维训练');

// 页面特定样式
$page_styles = <<<HTML
<style>
    /* 3-4岁思维训练专区特定样式 */
    body {
        background-color: #f0f7ff;
        font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif;
    }
    
    .navbar {
        background: linear-gradient(to right, #64b5f6, #90caf9);
        border-radius: 0 0 20px 20px;
    }
    
    .training-header {
        text-align: center;
        padding: 40px 0;
        margin-bottom: 30px;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        border: 6px solid #bbdefb;
    }
    
    .training-title {
        font-size: 2.5rem;
        font-weight: bold;
        color: #2196f3;
        margin-bottom: 15px;
    }
    
    .training-subtitle {
        font-size: 1.2rem;
        color: #666;
        max-width: 800px;
        margin: 0 auto 20px;
    }
    
    .training-types {
        margin-bottom: 40px;
    }
    
    .training-card {
        background-color: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        height: 100%;
        margin-bottom: 30px;
        border: 5px solid;
    }
    
    .training-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }
    
    .training-card.puzzle {
        border-color: #e1bee7;
    }
    
    .training-card.memory {
        border-color: #ffcc80;
    }
    
    .training-card.matching {
        border-color: #81d4fa;
    }
    
    .training-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .training-body {
        padding: 20px;
        text-align: center;
    }
    
    .training-title-card {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: #333;
    }
    
    .training-description {
        color: #666;
        margin-bottom: 20px;
    }
    
    .btn-training {
        padding: 10px 25px;
        border-radius: 50px;
        font-weight: bold;
        transition: all 0.3s ease;
        color: white;
    }
    
    .btn-training:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        color: white;
    }
    
    .btn-puzzle {
        background-color: #9c27b0;
    }
    
    .btn-memory {
        background-color: #ff9800;
    }
    
    .btn-matching {
        background-color: #03a9f4;
    }
    
    .benefits-section {
        background-color: #fff;
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        margin-bottom: 40px;
    }
    
    .benefits-title {
        font-size: 1.8rem;
        font-weight: bold;
        color: #2196f3;
        margin-bottom: 25px;
        text-align: center;
    }
    
    .benefit-item {
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f5f9ff;
        border-radius: 10px;
        transition: all 0.3s ease;
    }
    
    .benefit-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    
    .benefit-icon {
        font-size: 2rem;
        margin-bottom: 15px;
        color: #2196f3;
    }
    
    .benefit-title {
        font-size: 1.3rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: #333;
    }
    
    .benefit-text {
        color: #666;
    }
    
    .progress-track {
        background-color: #fff;
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        margin-bottom: 40px;
        text-align: center;
    }
    
    .progress-title {
        font-size: 1.8rem;
        font-weight: bold;
        color: #2196f3;
        margin-bottom: 20px;
    }
    
    .progress-description {
        color: #666;
        margin-bottom: 25px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .btn-large {
        padding: 12px 30px;
        font-size: 1.1rem;
        border-radius: 50px;
    }
</style>
HTML;
?>

<!-- 主内容区 -->
<div class="container mt-4">
    <!-- 思维训练标题 -->
    <div class="training-header">
        <h1 class="training-title">3-4岁思维训练</h1>
        <p class="training-subtitle">通过趣味游戏和互动挑战，锻炼孩子的观察力、记忆力和思维能力，让大脑更加灵活活跃！</p>
        <img src="<?php echo asset_url('images/training-banner.jpg'); ?>" alt="思维训练" class="img-fluid rounded" style="max-height: 300px; margin-bottom: 20px;">
    </div>
    
    <!-- 训练类型 -->
    <div class="training-types">
        <h2 class="section-title text-center mb-4">训练游戏</h2>
        
        <div class="row">
            <!-- 拼图游戏 -->
            <div class="col-md-4 mb-4">
                <div class="training-card puzzle">
                    <img src="<?php echo asset_url('images/puzzle-training.jpg'); ?>" alt="拼图游戏" class="training-image">
                    <div class="training-body">
                        <h3 class="training-title-card">简易拼图</h3>
                        <p class="training-description">拖动拼图碎片完成图案，锻炼空间想象力和手眼协调能力。</p>
                        <a href="<?php echo page_url('age-3-4-puzzle'); ?>" class="btn btn-training btn-puzzle">开始游戏</a>
                    </div>
                </div>
            </div>
            
            <!-- 记忆游戏 -->
            <div class="col-md-4 mb-4">
                <div class="training-card memory">
                    <img src="<?php echo asset_url('images/memory-training.jpg'); ?>" alt="记忆游戏" class="training-image">
                    <div class="training-body">
                        <h3 class="training-title-card">记忆卡牌</h3>
                        <p class="training-description">翻找相同的卡牌配对，训练短期记忆力和注意力。</p>
                        <a href="<?php echo page_url('age-3-4-memory'); ?>" class="btn btn-training btn-memory">开始游戏</a>
                    </div>
                </div>
            </div>
            
            <!-- 连线游戏 -->
            <div class="col-md-4 mb-4">
                <div class="training-card matching">
                    <img src="<?php echo asset_url('images/matching-training.jpg'); ?>" alt="连线游戏" class="training-image">
                    <div class="training-body">
                        <h3 class="training-title-card">形状匹配</h3>
                        <p class="training-description">将相同或相关的物品连接起来，训练逻辑思维和分类能力。</p>
                        <a href="<?php echo page_url('age-3-4-lines'); ?>" class="btn btn-training btn-matching">开始游戏</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 能力培养 -->
    <div class="benefits-section">
        <h2 class="benefits-title">思维能力培养</h2>
        
        <div class="row">
            <div class="col-md-4 mb-3">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">👁️</div>
                    <h3 class="benefit-title">观察力</h3>
                    <p class="benefit-text">培养孩子敏锐的观察能力，注意到物体的细节和特征。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-3">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">🧠</div>
                    <h3 class="benefit-title">记忆力</h3>
                    <p class="benefit-text">提升短期记忆和长期记忆能力，为后续学习打下基础。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-3">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">🔄</div>
                    <h3 class="benefit-title">逻辑思维</h3>
                    <p class="benefit-text">初步培养逻辑推理能力，理解事物之间的联系。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-3">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">🖐️</div>
                    <h3 class="benefit-title">精细动作</h3>
                    <p class="benefit-text">锻炼手眼协调和精细动作能力，为书写做准备。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-3">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">📊</div>
                    <h3 class="benefit-title">分类能力</h3>
                    <p class="benefit-text">学习根据不同特征对事物进行分类和归纳。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-3">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">💡</div>
                    <h3 class="benefit-title">解决问题</h3>
                    <p class="benefit-text">培养初步的问题解决能力和思考方式。</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 进度追踪 -->
    <div class="progress-track">
        <h2 class="progress-title">追踪学习进度</h2>
        <p class="progress-description">登录后可以查看孩子的学习数据和进步情况，包括完成的游戏数量、正确率和推荐的下一步训练内容。</p>
        
        <?php if (is_logged_in()): ?>
            <a href="<?php echo page_url('achievements'); ?>" class="btn btn-primary btn-large">查看我的进度</a>
        <?php else: ?>
            <a href="<?php echo page_url('login'); ?>" class="btn btn-primary btn-large">登录账户</a>
            <a href="<?php echo page_url('register'); ?>" class="btn btn-outline-primary btn-large ms-3">注册新账户</a>
        <?php endif; ?>
    </div>
</div> 